<template>
  <footer class="bg-white text-dark pt-16 pb-8 border-t border-gray-200"> <!-- 改为白色背景，添加顶部边框 -->
    <div class="container mx-auto px-6 md:px-12">
      <div class="grid md:grid-cols-4 gap-10 mb-12">
        <div>
          <div class="flex items-center space-x-3 mb-6">
            <!-- 使用原始Logo，在白色背景上显示正常 -->
            <router-link to="/" class="flex items-center space-x-3">
              <img src="/同风起.png" alt="同风起科技" class="h-12 w-auto">
            </router-link>
          </div>
          <p class="text-gray-600 mb-6 leading-relaxed text-sm"> <!-- 改为灰色文字 -->
            专注于 GEO 与 SEO 搜索优化，让每个企业都能在数字世界中被精准找到。
          </p>
          <div class="flex space-x-3">
            <!-- 调整社交图标颜色以适应白色背景 -->
            <a href="#" class="w-9 h-9 bg-gray-100 hover:bg-primary hover:text-white rounded-full flex items-center justify-center transition-all duration-300 text-gray-600">
              <i class="fa fa-weixin text-sm"></i>
            </a>
            <a href="#" class="w-9 h-9 bg-gray-100 hover:bg-primary hover:text-white rounded-full flex items-center justify-center transition-all duration-300 text-gray-600">
              <i class="fa fa-weibo text-sm"></i>
            </a>
            <a href="#" class="w-9 h-9 bg-gray-100 hover:bg-primary hover:text-white rounded-full flex items-center justify-center transition-all duration-300 text-gray-600">
              <i class="fa fa-linkedin text-sm"></i>
            </a>
            <a href="#" class="w-9 h-9 bg-gray-100 hover:bg-primary hover:text-white rounded-full flex items-center justify-center transition-all duration-300 text-gray-600">
              <i class="fa fa-youtube-play text-sm"></i>
            </a>
          </div>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4 text-dark">服务项目</h4> <!-- 改为深色标题 -->
          <ul class="space-y-3 text-sm">
            <li><a href="/#services" class="text-gray-600 hover:text-primary transition-colors duration-300">GEO 生成式引擎优化</a></li>
            <li><a href="/#services" class="text-gray-600 hover:text-primary transition-colors duration-300">SEO 搜索引擎优化</a></li>
            <li><a href="/#services" class="text-gray-600 hover:text-primary transition-colors duration-300">关键词策略规划</a></li>
            <li><a href="/#services" class="text-gray-600 hover:text-primary transition-colors duration-300">内容营销解决方案</a></li>
            <li><a href="/#services" class="text-gray-600 hover:text-primary transition-colors duration-300">AI 搜索优化咨询</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4 text-dark">关于我们</h4>
          <ul class="space-y-3 text-sm">
            <li><router-link to="/#about" class="text-gray-600 hover:text-primary transition-colors duration-300">公司简介</router-link></li>
            <li><router-link to="/careers" class="text-gray-600 hover:text-primary transition-colors duration-300">加入我们</router-link></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4 text-dark">联系方式</h4>
          <ul class="space-y-3 text-sm">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-0.5 mr-3 text-gray-600 text-sm"></i> <!-- 改为灰色图标 -->
              <span class="text-gray-600">山东省济南市槐荫区张庄路街道烟台路保利中科创新广场13号楼8层803室</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-3 text-gray-600 text-sm"></i>
              <span class="text-gray-600">400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-3 text-gray-600 text-sm"></i>
              <span class="text-gray-600">info@tongfengqi.com</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-clock-o mr-3 text-gray-600 text-sm"></i>
              <span class="text-gray-600">周一至周五 9:00-18:00</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-300 pt-6"> <!-- 改为浅灰色边框 -->
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-500 text-xs mb-4 md:mb-0">
            &copy; 2025 山东同风起信息科技有限公司. 保留所有权利.
          </p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300 text-xs">隐私政策</a>
            <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300 text-xs">服务条款</a>
            <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300 text-xs">法律声明</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer'
}
</script>